<template>
  <div class="chart">
    <div id="box">

    </div>
    <div class="title">
      {{$t('Container_CPUusage')}}
<!--      CPU使用-->

    </div>
  </div>
</template>

<script>
export default {
  props: ['cpudata', 'datatime'],
  watch: {
    // 监听cpudata是否发生变化
    cpudata: function () {
      this.charts()
    }
  },
  mounted () {
    // 调用echarts渲染图表
    this.charts()
  },
  methods: {
    charts () {
      // 获取图标渲染位置的dom
      let myChart = this.$echarts.init(document.getElementById('box'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['CPU使用']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.datatime
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          }
        },
        series: [{
          name: 'CPU使用',
          data: this.cpudata,
          type: 'line',
          color: ['#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c', '#f49f42'],
          smooth: true
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 230px;
}
#box{
  width: 100%;
  height: 200px;
}
.title{
  height: 30px;
  width: 100%;
  background: #067FB5;
  color: #fff;
  text-align: center;
  line-height: 30px;
}
</style>
